<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2022-11-17 14:37:19
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 全屏筛选
 * @FilePath: \basic-module\components\filter\filter.vue
-->
<template>
  <view class="filterFull">
    <view class="screen" @click="open">
      <view>筛选</view>
      <image mode="aspectFit" class="screen-icon" src="../../static/img/icon/screen.png"></image>
    </view>
    <uni-drawer ref="screenFull" mode="right" :maskClick="true" :width="600">
      <scroll-view scroll-y="true" class="list" @touchmove.stop>
        <view class="part" v-for="(v, i) in param" :key="i">
          <view class="title">{{ v.name }}</view>
          <view class="inner">
            <view @click="select(x, v)" class="option" :class="{ 'active': x.checked }" v-for="x in v.child" :key="x.id">
              {{ x.title }}</view>
          </view>
        </view>
      </scroll-view>
      <b-button :param="buttonParam" @handler="handler"></b-button>
    </uni-drawer>
  </view>
</template>

<script>
import bButton from "@/components/button/button";

export default {
  name: "lFilterFull",
  components: { bButton },
  props: {
    top: {
      type: Number,
      default: 44,
    },
    param: {
      type: [Object, Array],
      default: () => ({}),
    },
    screen: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      buttonParam: {
        type: "connect",
        position: "fixed",
        width: "530upx",
        fontSize: "32upx",
        list: [
          {
            title: "重置",
            value: 0,
            color: "#1D246A",
            bgcolor: "#1D246A",
            bgcolorInner: "#ffffff",
            border: "2upx solid #1D246A",
            bdradius: "40upx 0 0 40upx",
            bdradiusInner: "40upx 0 40upx 40upx",
          },
          {
            title: "确定",
            value: 1,
            bgcolor: "#1D246A",
            color: "#ffffff",
            bdradius: "0 40upx 40upx 0",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  created() {
    this.param.map((v) => v.child.map((x) => (x.checked = false)));
    console.log(this.param);
  },
  methods: {
    select(x, v) {
      let arr = [];
      switch (v.mode) {
        case "single":
          v.child.map((z) => {
            z.checked = z.id == x.id;
          });
          arr.push(x[v.match] || x.id);
          break;
        case "multiple":
          x.checked = !x.checked;
          v.child.map((z) => {
            if (z.checked) {
              arr.push(z[v.match] || z.id);
            }
          });
          break;
      }
      this.screen[v.key] = arr.join(",");
      this.$forceUpdate();
    },
    open() {
      this.$refs.screenFull.open();
    },
    close() {
      this.$refs.screenFull.close();
    },
    clear() {
      this.param.map((v) => {
        v.child.map((x) => (x.checked = false));
        this.screen[v.key] = "";
      });
      this.$forceUpdate();
    },
    handler(v) {
      this[v == 0 ? "clear" : "close"]();
    },
  },
};
</script>
<style lang='less' scoped>
/deep/ .uni-drawer {
  top: calc(0px + var(--status-bar-height));
}

/deep/ .uni-drawer__content {
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 20upx 0 0 20upx;
}

/deep/ .uni-scroll-view-content {
  flex-direction: column;
}

.list {
  height: calc(100% - 50px);

  .part {
    padding: 40upx 10upx 10upx 40upx;
    width: 100%;
    background: #ffffff;

    .title {
      color: #1d256e;
      font-size: 34upx;
    }

    .inner {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30upx;
    }

    .option {
      .flex(row, center);
      padding: 0 40upx;
      margin: 0 20upx 20upx 0;
      min-width: 200upx;
      height: 80upx;
      background: #f0f0f0;
      font-size: 25upx;
      color: #1d256e;
      border-radius: 40upx;
    }

    .active {
      border: 2upx solid #1ca9ff;
      color: #1ca9ff;
      background: rgba(28, 169, 255, 0.2);
    }
  }

  .part:not(:last-child) {
    margin-bottom: 20upx;
  }
}

.list ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.screen {
  .flex(row, flex-start);
  color: #888990;
  font-size: 30upx;

  .screen-icon {
    margin-top: 5upx;
    margin-left: 5upx;
    width: 30upx;
    height: 30upx;
  }
}
</style>